<template>
	<view class="content">
		<view class="user-box">
			<m-tree class="u-p-l-40" ref="mtree" :defaultProps="defaultProps" :data="tree" :divider="divider"
				:edit="edit" :unfold="true" @node-click="nodeClick" @add-item="addNode" @edit-item="editNode"
				@delete-item="deleteNode"></m-tree>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			/* 
			tree 数据
			*/
			defaultProps: {
				pid: 'pid',           // 此项为父级id的key
				id: 'id',             // 此项为id项的key
				children: 'children', // 此项为修改子集数据的key
				label: 'label', // 此项为修改显示数据的key
				color: 'color', // 此项为节点的颜色
				target: 'target' // 此项为字节的目标
			},
			divider: false,
			edit: true,
			tree: []
		}
	},
	onShow() {
		this.getEventTypeList()
	},
	methods: {
		async getEventTypeList() {
			let result = await this.$API.eventType.getEventTypeList()
			let newTree = []
			if (result.code === 200) {
				result.data.forEach(item => {
					let newItem = {
						label: item.eventTypeLabel,
						id: item.eventTypeId,
						pid: 0,
						color: item.eventTypeColor,
						target: 0,
						children: []
					}
					item.eventTypeChildList.forEach(child => {
						newItem.children.push({
							id: child.eventTypeChildId,
							label: child.eventTypeChildLabel,
							pid: item.eventTypeId,
							color: item.eventTypeColor,
							target: child.targetId
						})
					})
					newTree.push(newItem)
				})
			}
			this.tree = newTree
		},
		//遍历id节点并删除
		removeNodeData(datas, id, pid) { //遍历树  获取id数组
			if (pid == 0) {
				datas.forEach((item, index) => {
					if (item.id == id) {
						datas.splice(index, 1)
					}
				})
			} else {
				datas.forEach((item, index) => {
					if (item.id == pid) {
						item.children.forEach((child, index) => {
							if (child.id == id) {
								item.children.splice(index, 1)
							}
						})
					}
				})
			}
		},
		//节点点击事件
		nodeClick(e) {
			console.log('点击的项目', JSON.stringify(e));
		},
		//节点新增按钮点击事件
		async addNode(e) {
			console.log('点击的项目add', JSON.stringify(e));
			let data = e.pNodeData.id == 0 ?{
				eventTypeLabel: e.addContent,
				eventTypeColor: e.addColor
			}:{
				eventTypeId: e.pNodeData.id,
				eventTypeChildLabel: e.addContent
			}
			if(e.addTarget!=0){
				data.targetId = e.addTarget
			}
			let result = e.pNodeData.id == 0 ?
				await this.$API.eventType.saveOrUpdateEventType(data) :
				await this.$API.eventType.saveOrUpdateEventTypeChild(data)
			if (result.code == 200) {
				uni.showToast({
					title: '添加成功',
					icon: 'none'
				})
				await this.getEventTypeList()
			} else {
				uni.showToast({
					title: '添加失败',
					icon: 'none'
				})
			}
		},
		//节点更新按钮点击事件
		async editNode(e) {
			//e.pNodeData, e.editContent
			console.log('点击的项目add', JSON.stringify(e));
			if (e.editContent.length >= 2 && e.editContent.length <= 16) {
				e.pNodeData.label = e.editContent;
				e.pNodeData.name = e.editContent;
			}
			if (e.editColor) {
				e.pNodeData.color = e.editColor
				e.pNodeData.children.forEach(item => {
					item.color = e.editColor
				})
			}
			let result = e.pNodeData.pid == 0 ?
				await this.$API.eventType.saveOrUpdateEventType({
					eventTypeId: e.pNodeData.id,
					eventTypeLabel: e.editContent,
					eventTypeColor: e.editColor
				}) :
				await this.$API.eventType.saveOrUpdateEventTypeChild({
					eventTypeChildId: e.pNodeData.id,
					eventTypeChildLabel: e.editContent,
					targetId: e.editTarget
				})
			if (result.code == 200) {
				uni.showToast({
					title: '更新成功',
					icon: 'none'
				})
			} else {
				uni.showToast({
					title: '更新失败',
					icon: 'none'
				})
			}
		},
		//节点删除按钮点击事件
		async deleteNode(e) {
			console.log('点击的项目delete', JSON.stringify(e));
			this.removeNodeData(this.tree, e.id, e.pid)
			let result = e.pid == 0 ?
				await this.$API.eventType.deleteEventType({ eventTypeId: e.id }) :
				await this.$API.eventType.deleteEventTypeChild({ eventTypeChildId: e.id })
			if (result.code == 200) {
				uni.showToast({
					title: '删除成功',
					icon: 'none'
				})
			} else {
				uni.showToast({
					title: '删除失败',
					icon: 'none'
				})
			}
		},
	}
}
</script>

<style lang="scss">
page {
	background-color: #ededed;
}

.user-box {
	background-color: #fff;
	padding:  0 0 30rpx 30rpx;
}
</style>